<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/assets/css/archivalCustody.css">
</head>

<body style="background:#EFF3FC;height: 100%;" ng-app="app" ng-controller="fileCabinetCtrl">
<div class="clearfix">
    <div class="col-sm-12 padding0">
            <span style="display:inline-block;text-indent:20px;padding-top: 10px;padding-bottom: 10px;">档案管理 >
                档案库</span>
    </div>
    <div class="col-sm-12 pl20" >
        <div class="col-sm-2 main-content" style="margin-right:20px;">
            <div class="menu-title">
                <span>档案柜</span>
            </div>
            <div id="fileCabinetTitle" class="" data-toggle="collapse" data-target="#totalFileCabinet">
                <h4 style="font-size:16px;cursor: pointer;" class="select-title pr45 text-align-r mb0"
                    ng-click="showAllFileCabinet()">
                        <span style="padding-right:25px;font-size:20px;color:#ccc;"
                              ng-class="{'fa-caret-down':expend,'fa-caret-right':!expend}"
                              class="fa fa-caret-down"></span>
                    全部档案柜
                </h4>
            </div>
            <div id="totalFileCabinet" class="collapse" ng-class="{'in':showSecondMenu}"
                 aria-labelledby="fileCabinetTitle">
                <ul class="list-group">
                    <li ng-repeat="item in totalFileCabinet" id="{$ item.id $}"
                        ng-click="selectFileCabinet(item.id,item.code)" style="cursor: pointer;"
                        class="list-group-item border-none pr45 text-align-r">{$ item.code $}
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-sm-9 main-content">
            <div ng-show="!showSecondDetail">
                <table class="table table-striped table-hover" style="margin-top:20px;">
                    <div style="margin: 10px 5px;">
                        <button class="btn btn-primary" ng-click="addCabinat('add',1)">添加</button>
                    </div>
                    <thead class="table-header">
                    <tr>
                        <th><input type="checkbox" id="chkAll"></th>
                        <th>编号</th>
                        <th>格档数</th>
                        <th>材质</th>
                        <th>管理员</th>
                        <th>位置</th>
                        <th>备注</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="fileCabinet in totalFileCabinet">
                        <td>
                            <input type="checkbox">
                        </td>
                        <td>{$ fileCabinet.code $}</td>
                        <td>{$ fileCabinet.fileNum $}</td>
                        <td>{$ fileCabinet.material $}</td>
                        <td>{$ fileCabinet.admin $}</td>
                        <td>{$ fileCabinet.address $}</td>
                        <td>{$ fileCabinet.remark $}</td>
                        <td class="table-option">
                            <span>
                                <a ng-click="editCabinat('edit',fileCabinet.id)"><i class="fa fa-btn fa-edit"
                                                                                    popover="编辑"></i></a>
                            </span>
                            <span>
                                <a ng-click="delCabinat('0',fileCabinet.id)"><i class="fa fa-btn fa-trash" popover="删除"></i></a>
                            </span>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div ng-show="showSecondDetail">
                <div class="col-sm-12">
                    <h4 style="font-size:16px;font-weight:bold;color:#ddd;">
                        <span>{$ cabinetNumber $}号柜</span>
                        <i style="font-size:20px;padding-right:10px;" class="fa fa-edit"></i>
                    </h4>
                </div>
                <div class="clearfix" ng-repeat="item in currentFileCabinetDetail" ng-show="showSecondDetail">
                    <div class="col-sm-12">
                        <div class="col-sm-1 cabinet-gird" style="margin-right:20px;padding: 0px;" ng-mouseenter="showGrid = true "  ng-mouseleave="showGrid = false">
                            <button ng-show="showGrid" type="button" class="close"
                                    ng-click="delBoxNum('1',item.id)">
                                <span>×</span>
                            </button>
                            <span class="text-middle">{$ item.code $}</span>
                        </div>
                        <div class="col-sm-9 cabinet-gird">
                            <div class="col-sm-1 border-style box-item" ng-repeat="box in item.boxes"
                                 ng-click="editFileBox(cabinetNumber,box.id,'edit')" ng-mouseenter="showtimes = true"
                                 ng-mouseleave="showtimes = false">
                                <button ng-show="showtimes" type="button" class="close"
                                        ng-click="delBox('2',box.id)">
                                    <span>×</span>
                                </button>
                                <div class="text-middle">
                                    <div>{$ box.code $}</div>
                                    <div>档案盒</div>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-1" style="height:100px;">
                            <div class="add-box">
                                <button class="add-btn add-box" ng-click="addFileBox(cabinetNumber,item,'add')">
                                    <i class="fa fa-plus icon-plus"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/static/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/plugins/angular/angular.min.js"></script>
<script type="text/javascript" src="/static/plugins/angular-ui/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="/static/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
    var myApp = angular.module('app', ['ui.bootstrap']);
    myApp.config(function ($interpolateProvider) {
        $interpolateProvider.startSymbol('{$');
        $interpolateProvider.endSymbol('$}');
    });
    myApp.controller('fileCabinetCtrl', function ($scope, $http, $modal) {
        $scope.showSecondMenu = false;
        $scope.showSecondDetail = false;
        $scope.expend = true;
        $scope.totalFileCabinet = [];
        $scope.totalAdmin = [];
        $scope.BoxForm = {
            code: "",
            remark: "",
            specifications: "",
            lattice: "",
        };
        var params = {
            id: "",
            box: "",
            type: ""
        };

        //获取所有档案柜
        function _getTotalFileCabinet() {
            $http.get('/api/archiveCabinets/inquireCabinetsList', {}).then(function (resp) {
                $scope.totalFileCabinet = resp.data.data.allCabinets;
                // console.log("122", $scope.totalFileCabinet);
                $scope.totalAdmin = resp.data.data.allAdmin;
            }, function (err) {

            });
        }

        $scope.showAllFileCabinet = function () {
            $scope.showSecondDetail = false;
            angular.element('#totalFileCabinet>ul>li').removeClass('select-menu');
            $scope.expend = !$scope.expend;
            $scope.getFileCabinetLists();
        };

        $scope.getFileCabinetLists = function () {

        };

        //获取当前选中的档案柜
        $scope.getSelectedFileCabinet = function (id) {
            $http({
                method: "POST",
                url: '/api/archiveCabinets/inquireLatticesList',
                data: {
                    id: id
                }
            }).then(function (resp) {
                console.log("选中柜的数据", resp);
                $scope.currentFileCabinetDetail = resp.data.data;
            }, function (err) {

            });
        };

        $scope.addFileBox = function (cabinetNumber, cabinetGird, type) {
            $modal.open({
                templateUrl: '/static/html/archive_cabinets/updateFileBox.html',
                controller: 'modalInstanceCtrl',
                scope: $scope,
                resolve: {
                    params: function () {
                        $scope.BoxForm.lattice = cabinetGird.id;
                        params.id = cabinetGird.id;
                        params.type = type;
                        return params;
                    }
                }
            });
        };

        //编辑档案盒
        $scope.editFileBox = function (cabinetNumber, cabinetGird, type) {
            $modal.open({
                templateUrl: '/static/html/archive_cabinets/updateFileBox.html',
                controller: 'modalInstanceCtrl',
                scope: $scope,
                resolve: {
                    params: function () {
                        params.id = cabinetNumber;
                        params.box = cabinetGird;
                        params.type = type;
                        return params;
                    }
                }
            });
        }

        //删除盒
        $scope.delBox = function (type, boxId) {
            console.log(boxId);
            event.stopPropagation();
            $modal.open({
                templateUrl: '/static/html/archive_cabinets/delete.html',
                controller: 'deleteCtrl',
                scope: $scope,
                resolve: {
                    params: function () {
                        params.id = boxId;
                        params.type = type;
                        return params;
                    }
                }
            });

            {% comment %}$http({
                method: 'POST',
                url: '/static/html/archive_cabinets/delete.html',
                data: {
                    "id": boxId
                },
            }).then(function successCallback(response) {
                //判断是否可以删除

            }, function errorCallback(response) {
                // 请求失败执行代码
            });{% endcomment %}
        };
        //删除格
        $scope.delBoxNum = function (type, boxId) {
            console.log("boxId",boxId)
            $modal.open({
                templateUrl: '/static/html/archive_cabinets/delete.html',
                controller: 'deleteCtrl',
                scope: $scope,
                resolve: {
                    params: function () {
                        params.id = boxId;
                        params.type = type;
                        return params;
                    }
                }
            });
            {% comment %}$http({
                method: 'POST',
                url: '/api/orginazation/orgedit111',
                data: {
                    "id": boxId
                },
            }).then(function successCallback(response) {
                //判断是否可以删除


            }, function errorCallback(response) {
                // 请求失败执行代码
            });{% endcomment %}
        };
        //删除柜
        $scope.delCabinat = function (type, gridId) {
            $modal.open({
                templateUrl: '/static/html/archive_cabinets/delete.html',
                controller: 'deleteCtrl',
                scope: $scope,
                resolve: {
                    params: function () {
                        params.id = gridId;
                        params.type = type;
                        return params;
                    }
                }
            });
        }

        $scope.init = function () {
            _getTotalFileCabinet();
            $scope.getFileCabinetLists();
        };
        $scope.init();

        $scope.selectFileCabinet = function (id, code) {
            $scope.showSecondDetail = true;
            angular.element('#' + id).parent().children().removeClass('select-menu');
            angular.element('#' + id).addClass('select-menu');
            $scope.getSelectedFileCabinet(id);
            $scope.cabinetNumber = code;
        };

        //添加档案柜
        $scope.addCabinat = function (type, id) {
            $modal.open({
                templateUrl: '/static/html/archive_cabinets/addCabinat.html',
                controller: 'addCabinatCtrl',
                scope: $scope,
                resolve: {
                    params: function () {
                        params.id = id;
                        params.type = type;
                        return params;
                    }
                }
            });
        }
        //编辑档案柜
        $scope.editCabinat = function (type, id) {
            $modal.open({
                templateUrl: '/static/html/archive_cabinets/addCabinat.html',
                controller: 'addCabinatCtrl',
                scope: $scope,
                resolve: {
                    params: function () {
                        params.id = id;
                        params.type = type;
                        return params;
                    }
                }
            });
        }
    });
    myApp.controller('modalInstanceCtrl', function ($scope, $modalInstance, params, $http) {
        $scope.fileBox = {
            boxNum: "",
            Specifications: "",
            remarks: ""
        }
        //判断模态框是编辑还是添加盒
        if (params.type == "add") {

            $scope.modalTitle = "添加档案盒";
            $scope.confirm = function (form) {
                console.log("添加");

                $modalInstance.close();
                $http.post('/api/archiveCabinets/addCabinetBox', form).then(
                    function (resp) {
                        console.log("添加成功");
                        console.log("old", $scope.currentFileCabinetDetail);

                        $scope.currentFileCabinetDetail = resp.data.data;


                    },
                    function (resp) {
                        alert("接口请求失败");
                    });
                $modalInstance.close();
            };
        } else {
            $scope.modalTitle = "编辑档案盒";
            $http({
                method: 'POST',
                url: '/api/archiveCabinets/inquireBoxDetail',
                data: {
                    "id": params.box
                },
            }).then(function successCallback(response) {
                $scope.BoxForm = response.data.data
            }, function errorCallback(response) {
                // 请求失败执行代码
            });
            //编辑确认
            $scope.confirm = function (form) {
                $modalInstance.close();
                $http.post('/api/archiveCabinets/inquireBoxUpdate', form).then(
                    function (resp) {
                        console.log("添加成功");
                    },
                    function (resp) {
                        alert("接口请求失败");
                    });
            };
            $scope.cancel = function () {
                {#$modalInstance.close();#}
            }
        }


        $scope.cancel = function () {
            $modalInstance.close();
        };
    });
    //添加 编辑档案柜的模态框
    myApp.controller('addCabinatCtrl', function ($scope, $modalInstance, params, $http) {
        if (params.type == "add") {
            $scope.modalTitle = "添加档案柜";
            $scope.addCabinatForm = {
                code: "",
                cabinatNum: "",
                material: "",
                posation: "",
                remarks: "",
                admin: ""
            };
            console.log("params");
            $scope.confirm = function (form) {
                $modalInstance.close();
                $http.post('/api/archiveCabinets/addCabinet', form).then(
                    function (resp) {
                        console.log("添加成功");
                    },
                    function (resp) {
                        alert("接口请求失败");
                    });
            };
        } else {
            $scope.modalTitle = "编辑档案柜";
            $http({
                method: 'POST',
                url: '/api/archiveCabinets/inquireCabinetDetail',
                data: {
                    "id": params.id
                },
            }).then(function successCallback(response) {
                $scope.addCabinatForm = response.data.data
            }, function errorCallback(response) {
                // 请求失败执行代码
            });
            //编辑确认
            $scope.confirm = function (form) {
                $modalInstance.close();
                $http.post('/api/archiveCabinets/inquireCabinetsUpdate', form).then(
                    function (resp) {
                        console.log("添加成功");
                    },
                    function (resp) {
                        alert("接口请求失败");
                    });
            };
        }
        $scope.cancel = function () {
            $modalInstance.close();
        };
    })

    //删除的模态框
    myApp.controller('deleteCtrl', function ($scope, $modalInstance, params, $http) {
        console.log("3434", params.type)
        if (params.type == "0") {
            $scope.modalTitle = "删除档案柜";
            console.log("柜");
            $scope.confirm = function () {
                $modalInstance.close();
                $http({
                    method: 'POST',
                    url: '/api/archiveCabinets/delCabinets',
                    data: {
                        "id": params.id
                    },
                }).then(function successCallback(response) {

                }, function errorCallback(response) {
                    // 请求失败执行代码
                });
            };
        } else if (params.type == "1") {
            $scope.modalTitle = "删除档案格";
            console.log("格");
            $scope.confirm = function () {
                $modalInstance.close();
                $http({
                    method: 'POST',
                    url: '/api/archiveCabinets/delLattice',
                    data: {
                        "id": params.id
                    },
                }).then(function successCallback(response) {

                }, function errorCallback(response) {
                    // 请求失败执行代码
                });
            };
        } else {
            $scope.modalTitle = "删除档案盒";
            console.log("盒");
            $scope.confirm = function () {
                $modalInstance.close();
                $http({
                    method: 'POST',
                    url: '/api/archiveCabinets/delBox',
                    data: {
                        "id": params.id
                    },
                }).then(function successCallback(response) {

                }, function errorCallback(response) {
                    // 请求失败执行代码
                });
            };
        }
        $scope.cancel = function () {
            $modalInstance.dismiss();
        };
    });
</script>
</body>

</html>